<template>
  <q-dialog>
    <q-card style="width: 800px">
      <q-toolbar class="popup-header">
        <q-toolbar-title class="q-ma-md cap"> Unauthorized </q-toolbar-title>
        <q-space />
        <q-btn icon="close" size="lg" flat round dense @click="goBack" />
      </q-toolbar>
      <div class="q-pa-lg">
        Messages: Please tell your supervisor to authorized
      </div>
      <ul>
        <li v-for="(item, index) in props.text" :key="index">
          {{ item }}
        </li>
      </ul>
      <q-card-actions class="justify-evenly q-pa-md">
        <q-btn label="OK" class="q-ml-sm yellow-btn" @click="goBack" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
const props = defineProps<{
  text: string[];
}>();

function goBack() {
  return (window.location.href = '/');
}
</script>
